In the midst of upgrading a project from CRA 4 to CRA 5, which bumps Webpack from 4 to 5 in the process. Specifically, the upgrade was from:
react-scripts: 4.0.3 to 5.0.0
webpack: 4.33.0 to 5.68.0
Everything's working except one issue that I'm having no luck tracking down the cause of.
One product within the app uses a set of nested index.ts files to manage exports, so they can be imported in one shot instead of a bunch of individual imports. The sequence looks like this:
//reports-async/containers/AggregatedReportDetail/AggregatedReportDetail.js
export const AggregatedReportDetail = () => {
...snip...
}
export default AggregatedReportDetail
-------------------------------
//reports-async/containers/index.ts
...snip...
export { default as AggregatedReportDetail } from './AggregatedReportDetail/AggregatedReportDetail'
export { default as TrendReportDetail } from './TrendReportDetail/TrendReportDetail'
...snip...
-------------------------------
//reports-async/index.ts
export * from './containers'
export * from './components'
export * from './models'
export * from './store'
export * from './types'
export * from './utils'
-------------------------------
//appMenu.js
import {
AggregatedReportDetail,
ReportPrint,
...snip...
} from './reports-async/containers'
This setup worked with CRA4/Webpack4, but with the update to CRA5/Webpack5, it compiles successfully but throws this error in the browser console:
Uncaught TypeError: _AggregatedReportDetail_AggregatedReportDetail__WEBPACK_IMPORTED_MODULE_4__ is undefined
I found that by changing the import in appMenu.js to directly import from the AggregatedReportDetail.js file instead of the module-level index.ts file, the error goes away (and it throws a similar error for the next imported component). IE, this works:
import AggregatedReportDetail from './reports-async/containers/AggregatedReportDetail/AggregatedReportDetail'
I'm assuming this is likely to be some kind of circular dependency issue or similar, but I can't seem to find any good info on how to resolve this without going back and manually changing 500+ imports to no longer use the index.ts files.
Am I missing something really obvious?